<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Welcome Page</title>
        <h:outputStylesheet library="css" name="stylesheet.css" />
    </h:head>
    <h:body id = "indexBody">
        <header id="mainHeader">
            <div style="width:1000px;height:110px;margin:auto;">
                <h1 id="mainTitle">MeteoCal</h1>
                <h:form id="loginform">
                    <p:panel style="height:78px;background:none;border:none;padding:0;">
                        <h:panelGrid columns="3" id="logGrid" style="color:white;">
                            <p:outputLabel for="username" value="Email"/>
                            <p:outputLabel for="pass" value="Password"/>
                            <p:outputLabel value=""/>
                            <p:inputText id="username" value="#{indexBean.username}" 
                                         required="true" maxlength="200" />
                            <p:password id="pass" value="#{indexBean.password}" 
                                        required="true" />
                            <p:commandButton id="submit" value="Log in" ajax="true" update="logGrid"
                                             action="#{indexBean.login()}"/>
                            <p:link value="Forgot your password?" outcome="passwordlost"/>
                            <p:growl id="growl" life="3000"/>   
                        </h:panelGrid>
                    </p:panel>
                </h:form>
            </div>
        </header>
        <section id="homeSection">
                <div style="width:1000px;margin:auto;">
                <h:form id="registrationform">
                    <h1>Create an account</h1>
                    <p:panel style="height: 329px;background:none;border:none;">
                        <h:panelGrid columns="" id="regGrid">
                            <p:inputText id="name" value="#{indexBean.user.name}" maxlength="200"/>
                            <p:watermark for="name" value="First name"/>

                            <p:inputText id="surname" value="#{indexBean.user.surname}" maxlength="200"/>
                            <p:watermark for="surname" value="Surname"/>

                            <p:inputText id="email" value="#{indexBean.user.email}" maxlength="200" />
                            <p:watermark for="email" value="Lower case email"/>

                            <p:password id="password" value="#{indexBean.user.password}"
                                        feedback="true" match="pwd2" label="Password"/>
                            <p:watermark for="password" value="Password"/>

                            <p:password id="pwd2" label="Confirm Password"/>
                            <p:watermark for="pwd2" value="Re-enter password"/>
                            
                            <p:commandButton id="submit" value="Create an account" ajax="true"
                                             style="margin-top:10px;"
                                             update=":loginform:logGrid,regGrid"
                                             action="#{indexBean.register()}"/>
                        </h:panelGrid>
                    </p:panel>
                </h:form>
            </div>
        </section>
    </h:body>
</html>
